<template>
  <div id="z">
    <van-nav-bar    
      left-text="会员码"     
      left-arrow   
      @click-left="onClickLeft"   
    />
    <div id="v1">
      <div class="v1-1" v-if="!islogin">
        <img src="../assets/21.png" name="touxiang" />
        <span>个人昵称</span>
      </div>
      <div class="v1-1" v-else>
        <img :src='`http://localhost:3000/avatar/${img}`' name="touxiang" />
        <span>{{uname}}</span>
      </div>
      <div id="v2">
        <div>
          <h2>2</h2>
          <p>奈雪券</p>
        </div>
        <div>
          <h2>0</h2>
          <p>积分商城</p>
        </div>
        <div>
          <h2>0.00</h2>
          <p>余额(元)</p>
        </div>
        <div>
          <h2>0</h2>
          <p>礼品卡</p>
        </div>
      </div>
      <div id="v3">
        <img src="../assets/erweima.jpg" name="erweima" />
        <p>支付前出示可累计积分,会员码每30秒更新</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations,mapState } from 'vuex'
export default {
  computed: {
     ...mapState(['uname','islogin','img']),
  },
   methods: {
     ...mapMutations(['updateUname','updateImg']),
    onClickLeft() {
      this.$router.push("me")
    }, 
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#z{
  min-height:100vh;
  background-color: rgb(243, 241, 241); 
}
::v-deep .van-nav-bar__text {
  color: black;
  font-size: 15px;
   margin: 0.5vh 0 0 2vh;
}
::v-deep .van-icon-arrow-left:before{
  color:black;
}
#v1 {
  position: relative;
  border: 1px solid gainsboro;
  border-radius: 10px;
  top: 9vh;
  margin: 2vh 2vh;
  background-color: white;
  box-shadow: 2px 2px gainsboro;
  padding: 0 0 10vh 0;
}
#v1 .v1-1 img {
  width: 12vh;
  height: 12vh;
  border-radius: 50%;
  position: absolute;
  top: -7vh;
}
#v1 .v1-1 span {
  display: inline-block;
  margin: 7vh 0 1vh;
  font-size: 16px;
}
#v2 {
  display: flex;
  justify-content: space-around;
  margin: 1vh 0;
}
p {
  font-size: 14px;
  margin-top: 1vh;
}
#v3 img {
  width: 40%;
  margin-top: 3vh;
  margin-bottom: 1vh;
}
</style>